<%--
  Created by IntelliJ IDEA.
  User: haitang
  Date: 2021/12/2
  Time: 15:04
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>文章类型管理</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/bootstrap/css/bootstrap.css">
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery-3.5.1.js"></script>
    <script src="${pageContext.request.contextPath}/static/bootstrap/js/bootstrap.js"></script>

    <style>
        td {
            vertical-align: middle !important;
        }

        .row {
            margin-bottom: 30px;
        }

        th {
            text-align: center;
        }

        #add {
            margin: 0 50px;
        }
    </style>
</head>
<body>
<!-- <h1>你好，世界！</h1> -->
<div class="container-fluid">
    <div class="row">
        <div>
            <ol class="breadcrumb">
                <li><a href="${pageContext.request.contextPath}/system/article/toMain" class="btn btn-primary btn-sm"
                       role="button"><span class="glyphicon glyphicon-home pull-right" aria-hidden="true"></span>&nbsp;&nbsp;
                    主&nbsp;&nbsp; 页</a></li>
                <li class="active">文章管理</li>
                <li class="active">文章管理</li>
            </ol>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-4 col-sm-offset-6">
            <div class="input-group input-group-sm">
                <span class="input-group-addon">是否可用</span>
                <select class="form-control" id="searchState" value="${requestScope.state}">
                    <option value="1" value="${requestScope.state == 1 ? 'selected' : ''}">可用</option>
                    <option value="0" value="${requestScope.state == 0 ? 'selected' : ''}">不可用</option>
                    <option value="2" value="${requestScope.state == 2 ? 'selected' : ''}">全部</option>
                </select>
                <span class="input-group-addon">按名称搜索</span>
                <input type="text" class="form-control" placeholder="输入包含的类型名称" id="searchWord" value="${requestScope.title}"/>
                <span class="input-group-btn">
                    <button class="btn btn-success" type="button" id="search">
                        <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                    </button>
                </span>
            </div><!-- /input-group -->
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6 col-sm-offset-2">
            <div class="btn-toolbar">
                <div class="btn-group btn-group-sm">
                    <button class="btn btn-success" id="all-select">全选</button>
                    <button class="btn btn-info" id="inverse-select">反选</button>
                    <button class="btn btn-success" id="notall-select">全不选</button>
                </div>
                <div class="btn-group btn-group-sm">
                    <button class="btn btn-primary" id="add">
                        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> 添加
                    </button>
                </div>
                <div class="btn-group btn-group-sm">
                    <button class="btn btn-danger" id="batch_delete">
                        <span class="glyphicon glyphicon-trash" aria-hidden="true"></span> 批量删除
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-8 col-sm-offset-2">
            <form>
            <table class="table table-sm table-bordered table-hover text-center">
                <tr>
                    <th><input type="checkbox" id="main-type-id"/></th>
                    <th>文章标题</th>
                    <th>文章简介</th>
                    <th>发布时间</th>h
                    <th>状态</th>
                    <th>类型</th>
                    <th>发布者</th>
                    <th>操作</th>
                </tr>
                <c:forEach items="${requestScope.page.list}" var="article">
                    <tr>
                        <td><input type="checkbox" class="article-id" name="items" value="${article.newsId}"/></td>
                        <td>${article.newsTitle}</td>
                        <td>${article.newsSummary}</td>
                        <td><fmt:formatDate value="${article.newsPublishTime}" pattern="yyyy-MM-dd HH:mm:ss" /></td>
                        <td>${article.newsState == 0 ?"不可用" : "可用" }</td>
                        <td>${article.articleType.typeName}</td>
                        <td>${article.systemUser.userTrueName}</td>
                        <td>
                            <button class="delete btn btn-danger btn-sm" >
                                <!-- typeId -->
                                <span class="glyphicon glyphicon-trash" aria-hidden="true" data-article-id="${article.newsId}"></span> 删除
                            </button>
                            &nbsp;&nbsp;
                            <button class="update btn btn-info btn-sm">
                                <span class="glyphicon glyphicon-pencil" aria-hidden="true" data-article-id="${article.newsId}"></span> 修改
                            </button>

                            <button class="detail btn btn-info btn-sm">
                                <span class="glyphicon glyphicon-list-alt" aria-hidden="true" data-article-id="${article.newsId}"></span> 详情
                            </button>
                        </td>
                    </tr>
                </c:forEach>

            </table>
            </form>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-4 col-sm-offset-2">
            <div class="input-group input-group-sm" style="margin-top: 20px">
                <span class="input-group-addon">共计：${page.pages}页/${page.count}条记录，每页</span>
                <select class="form-control" id="pageSize">
                    <option value="5" ${page.pageSize == 5?'selected':''}>5</option>
                    <option value="10" ${page.pageSize == 10?'selected':''}>10</option>
                    <option value="20" ${page.pageSize == 20?'selected':''}>20</option>
                </select>
                <span class="input-group-addon">条，跳转到</span>
                <input type="text" class="form-control" placeholder="请输入页码数" id="pageNum">
                <span class="input-group-btn">
					<button class="btn btn-success btn-sm" type="button" id="jump">跳转
						<span class="glyphicon glyphicon-send" aria-hidden="true"></span></button>
				</span>
            </div>
        </div>
        <div class="col-sm-4 col-sm-offset-1" style="margin-left:13%">
            <nav aria-label="Page navigation">
                <ul class="pagination pagination-sm">
                    <li ${page.isFirstPage?'class="disabled"':''}><a href="#" data-num="1">首页</a></li>
                    <li ${page.hasPrePage?'class="disabled"':''}>
                        <a href="#" aria-label="Previous" data-num="${page.prePage}">
                            <span aria-hidden="true" >&laquo;</span>
                        </a>
                    </li>
                    <c:forEach items="${page.navigatePageNums}" var="navigatePageNum">
                       <li ${navigatePageNum==page.pageNum?'class="active disabled"':''}><a href="#" data-num="${navigatePageNum}">${navigatePageNum}</a></li>
                    </c:forEach>

                    <li ${page.hasNextPage?'':'class="disabled"'}
                        <a href="#" aria-label="Next" data-num="${page.nextPage}">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                    <li ${page.isLastPage?'class="disabled"':''}><a href="#" data-num="${page.pages}">尾页</a></li>
                </ul>
            </nav>
        </div>
    </div>
</div>
<script type="text/javascript">
    $("#all-select").on("click", function(){
        $(".article-id,#main-type-id").prop("checked",true);
    })

    $(".article-id").on("click",function() {
        $("#main-type-id").prop("checked", $(".article-id").length == $(".article-id:checked").length);
    })

    $("#notall-select").on("click", function(){
        $(".article-id, #main-type-id").prop("checked",false);
    })

    $("#inverse-select").on("click", function(){
        $.each($(".article-id"),function (i,n) {
            $(n).prop("checked", !$(n).prop("checked"))
        })
        $("#main-type-id").prop("checked", $(".article-id").length == $(".article-id:checked").length);
    })

    $("#main-type-id").on("click", function () {
        $(".article-id").prop("checked",$(this).prop("checked"));
    })

    $("#add").on("click", function () {
        location.href = "${pageContext.request.contextPath}/system/article/toAdd";
    })

    $("#search").on("click", function (){
        let state = $("#searchState").val();
        let words = $("#searchWord").val().trim();
        window.location.href = "${pageContext.request.contextPath}/system/article/?newsState="+state+"&newsTitle="+words;
    })

    $(".pagination").on("click","li a",function (){
        if($(this).parent().hasClass("disabled")){
            return false;
        }
        let num = $(this).data("num");
        window.location.href = "${pageContext.request.contextPath}/system/article/?newsState=${requestScope.state}&"+
        "newsTitle=${requestScope.title}&pageNum="+num+"&pageSize=${page.pageSize}";

    })

    $("#jump").on("click", function () {
        let pageText = $("#pageNum").val().trim();
        if(pageText == ""){
            pageText = "1";
        }
        let pageNum = parseInt(pageText);
        let pageSize = $("#pageSize").val();
        if(!isNaN(pageNum) && pageNum >= 1 && pageNum <= "${page.pages}"
        && !(pageNum == "${page.pageNum}" && pageSize == "${page.pageSize}")){
            window.location.href = "${pageContext.request.contextPath}/system/article/?"+
                "newsState=${requestScope.state}&newsTitle=${requestScope.title}&"+
                "pageNum="+pageNum+"&pageSize="+pageSize;
        }
    })

    $(".table").on("click",".delete", function (){
        console.log("delete...");
        let id = $(this).children().eq(0).data("articleId");
        if(id != ""){
            $.ajax({
                  url:"${pageContext.request.contextPath}/system/article/delete",
                  data:"newsId="+id,
                  type:"get",
                  dataType:"json",
                  success:function (result) {
                      console.log(result);
                      if (result) {
                          alert("删除成功")
                          location.href = "${pageContext.request.contextPath}/system/article/";
                      } else {
                          alert("删除失败")
                      }
                  }
            })
        }

    })

    $("#batch_delete").on("click", function () {
        let items = $("form").serialize();
        if(items != ""){
            $.ajax({
                  url:"${pageContext.request.contextPath}/system/article/deleteSelected",
                  data:"items="+items,
                  type:"get",
                  dataType:"json",
                  success:function (result) {
                      console.log(result);
                      if (result) {
                          alert("删除成功")
                          location.href = "${pageContext.request.contextPath}/system/article/";
                      } else {
                          alert("删除失败")
                      }
                  }
            })
        }
    })

    $(".table").on("click",".update", function (){
        let id = $(this).children().eq(0).data("articleId");
        if(id != ""){
            window.location.href = "${pageContext.request.contextPath}/system/article/toUpdate?newsId="+ id +
            "&flag=true";
        }
        return false;
    })

    $(".table").on("click",".detail", function (){
        let id = $(this).children().eq(0).data("articleId");
        if(id != ""){
            window.location.href = "${pageContext.request.contextPath}/system/article/toUpdate?newsId="+ id +
            "&flag=false";
        }
        return false;
    })

</script>
</body>
</html>
